import React, { useState } from 'react';
import './index.css';

interface SearchBarProps {
  placeholder?: string;
  onSearch?: (value: string) => void;
  onFocus?: () => void;
  showScanIcon?: boolean;
  showVoiceIcon?: boolean;
}

const SearchBar: React.FC<SearchBarProps> = ({
  placeholder = '请输入商品名称',
  onSearch,
  onFocus,
  showScanIcon = true,
  showVoiceIcon = true
}) => {
  const [value, setValue] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch?.(value);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return (
    <div className="search-bar">
      <form className="search-bar__form" onSubmit={handleSubmit}>
        <div className="search-bar__input-wrapper">
          <input
            type="text"
            className="search-bar__input"
            placeholder={placeholder}
            value={value}
            onChange={handleInputChange}
            onFocus={onFocus}
          />
          <div className="search-bar__search-icon">🔍</div>
        </div>
      </form>
      
      {showScanIcon && (
        <div className="search-bar__action-icon">
          📷
        </div>
      )}
      
      {showVoiceIcon && (
        <div className="search-bar__action-icon">
          🎤
        </div>
      )}
    </div>
  );
};

export default SearchBar; 